<template>
    <div>
        <h1>shallowReactive() & shallowReadonly()</h1>
        <div class="group">
            <button type="button" @click="editshallowReactive">修改shallowReactive</button>
        </div>
        <div class="group">
            slrdataObj3.count: {{ slrdataObj3.count }}
        </div>
        <div class="group">
            <ul>
                <li>slrdataObj3.strArr :</li>
                <li v-for="item in slrdataObj3.strArr" :key="item">{{ item }}</li>
            </ul>
        </div>
        <div class="group">
            <ul>
                <li v-for="(value, key, index) in slrdataObj3.user" :key="index">{{ key }} : {{ value }}</li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: 'diyDemo36'
}

</script>


<script setup lang='ts'>
import { shallowReactive, shallowReadonly } from 'vue';


let dataObj3 = {
    count: 0,
    strArr: ['php', '刘强东', '马云', '马化腾', '任正非'],
    user: {
        name: '许家印',
        sex: 'nan',
        age: 42,
        aihao: {}
    }
}

let slrdataObj3 = shallowReactive(dataObj3)

let slrydataObj3 = shallowReadonly(dataObj3)

const editshallowReactive = () => {
    // 修改第一层
    // slrdataObj3.count++
    // slrdataObj3.strArr = ['213', '214']
    // slrdataObj3.user = {
    //     name: '许家印984512',
    //     sex: 'nan',
    //     age: 42,
    //     aihao: {}
    // }

    // 修改深层
    slrdataObj3.user.name = '廖文静'

    // slrydataObj3.user.name = 'lwj' // 
    console.log(slrydataObj3.user.name);

    slrydataObj3.user.age = 582
    console.log(slrydataObj3.user.age);


    // 无法为“user”赋值，因为它是只读属性。
    // slrydataObj3.user = {
    //     name: '许家印984512',
    //     sex: 'nan',
    //     age: 42,
    //     aihao: {}
    // }

}


</script>

<style lang="scss" scoped>
.group {
    padding: 20px;
    border: 2px solid skyblue;
    margin: 10px 0;
}
</style>